<template>
<div>
    <div>
        <el-form ref="form" label-width="100px">
            <el-form-item label="用户账号">
                <el-input v-model="User.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
                <el-input v-model="User.password"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号">
                <el-input v-model="User.userPhone"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-model="User.userEmail"></el-input>
            </el-form-item>

            <el-form-item label="上传头像" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:10086/woniucinema/admin/user/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        name="imgUplaod">
                   <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="是否冻结">
                    <el-radio v-model="User.status" :label=1>正常</el-radio>
                    <el-radio v-model="User.status" :label=0>冻结</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即修改</el-button>
                <el-button @click="Submit">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
    export default {
        name: 'UpdateUser',
        props:["uid"],
        data() {
            return {
                User: {},
                imageUrl:"",
                formLabelWidth: '120px',
                filename:"",
                id:'',
            }
        },
        methods: {
            onSubmit() {//修改数据
                console.log('submit!');
                let url=this.base_path+"/admin/manager/modify";
                if (this.filename==null || this.filename==''){//当不修改文件时判断
                    this.filename=this.User.userAvatar;
                }
                this.axios.post(url,{
                    id:this.User.id,
                    username:this.User.username,
                    userPhone:this.User.userPhone,
                    password:this.User.password,
                    userEmail:this.User.userEmail,
                    status:this.User.status,
                    userAvatar:this.filename,
                }).then(data=>{
                    console.log(data)
                    if (data.data.code==200){
                        alert(data.data.msg);
                        this.$emit("changeFormUpdateVisible",false);
                        //转到列表
                        this.router.push("/UserControl");
                    }else {
                        alert(data.data.msg);
                        this.router.push("/UserControl");
                    }
                })
            },
            Submit(){
                this.$emit("changeFormUpdateVisible",false);
            },
            handleAvatarSuccess(res, file) {
                //得到了上传文件和路径的名字
                this.imageUrl=this.base_path+"/"+res.data;
                //只得到了上传文件的名字
                this.filename=res.data;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        created:function() {
            this.axios.get(this.base_path + "/admin/manager/queryById", {
                params:{
                    id:this.uid
                }
            }).then(data=>{
                console.log(data)
                this.User=data.data.data;
                let t = data.data.data ;
                this.imageUrl = this.base_path+"/"+t.userAvatar;
            })
        }
    };
</script>

<style scoped>

    .avatar-uploader-icon {
        border: 1px dashed #cccccc;
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>